<template>
  <div>
    <div>
      <el-form :inline="true" :model="searchObj" class="demo-form-inline">
        <el-form-item label="人物标签">
          <el-input v-model="searchObj.tagName" placeholder="人物标签"></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="searchObj.communityName" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="searchObj.tel" placeholder="手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <!-- 添加标签 -->
      <el-button type="text" @click="dialogFormVisible = true">添加实有力量</el-button>
      <el-dialog :title=title :visible.sync="dialogFormVisible">
        <el-form :model="searchObj" :rules="rules" ref="ruleForm">
          <el-form-item label="名称"  prop="communityName">
            <el-input v-model="searchObj.communityName" placeholder="实有力量名称"></el-input>
          </el-form-item>
          <template>
            <el-form-item label="性别">
              <el-radio-group v-model="searchObj.sex">
                <el-radio :label="1">男</el-radio>
                <el-radio :label="2">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </template>
          <el-form-item label="户籍地址">
            <el-input v-model="searchObj.address" placeholder="标签名称"></el-input>
          </el-form-item>
          <el-form-item label="所属公司">
            <el-input v-model="searchObj.companyId" placeholder="所属公司"></el-input>
          </el-form-item>
          <el-form-item label="证件类型" prop="typeId">
            <el-select v-model="searchObj.typeId" placeholder="请选择证件类型">
              <el-option
                v-for="item in options"
                :key="item.typeId"
                :label="item.name"
                :value="item.typeId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所在小区" prop="resId">
            <el-select v-model="searchObj.resId" placeholder="请选择所在小区">
              <el-option
                v-for="item in option"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="照片">
            <el-upload
              action="/dev-api/community-warfare/upload"
              :on-success="handleAvatarSuccess"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="证件号码" prop="idNumber">
            <el-input v-model="searchObj.idNumber" placeholder="证件号码"></el-input>
          </el-form-item>
          <el-form-item label="电话号码">
            <el-input v-model="searchObj.tel" placeholder="电话号码"></el-input>
          </el-form-item>
          <el-form-item label="居住地址">
            <el-input v-model="searchObj.residential" placeholder="居住地址"></el-input>
          </el-form-item>

          <div>
            <el-table
              ref="multipleTable"
              :data="tableDatas"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column prop="tagId" label="编号" show-overflow-tooltip></el-table-column>
              <el-table-column prop="tagName"  label="标签名称" show-overflow-tooltip></el-table-column>
            </el-table>
          </div>

        </el-form>
          <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="getAdd">确 定</el-button>
        </div>
      </el-dialog>
    </div>
      <form action="/dev-api/community-warfare/import" method="post" enctype="multipart/form-data">
        <input type="file" name="file" id="file">
        <input type="submit" value="导入">
        <el-button @click="derive" type="primary">导出</el-button>
        <el-button @click="delTag"><i class="el-icon-delete"></i>批量删除力量</el-button>
      </form>

    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="powerId" label="编号" show-overflow-tooltip></el-table-column>
      <el-table-column prop="communityName" label="姓名" show-overflow-tooltip></el-table-column>
      <el-table-column prop="sex" label="性别" show-overflow-tooltip >
      </el-table-column>
      <el-table-column prop="img" label="照片" show-overflow-tooltip>
        <template v-slot="scope">
          <el-image :src="scope.row.img.split(',')[0]"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="tel" label="电话" show-overflow-tooltip></el-table-column>
      <el-table-column prop="idNumber" label="证件号码" show-overflow-tooltip></el-table-column>
      <el-table-column prop="company" label="所属公司" show-overflow-tooltip></el-table-column>
      <el-table-column prop="residential" label="居住地址" show-overflow-tooltip></el-table-column>
      <el-table-column prop="address" label="户籍地址" show-overflow-tooltip></el-table-column>
      <el-table-column prop="tagName" label="标签" show-overflow-tooltip></el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="150">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row.powerId)" type="text" size="small"><i class="el-icon-edit"></i>查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--    分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchObj.pageNum"
      :page-sizes="[5, 10, 20, 100]"
      :page-size="searchObj.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import {getByIdTag,getTagList, getUpdTag} from "../../../api/monitor/manage";
import {MessageBox} from "element-ui";
import {
  getAddPower, getByidPower,
  getDelPower,
  getExport,
  getNameList,
  getPowerList,
  getResidenceList, getUpdPower
} from "../../../api/monitor/power";
import {exportExcel} from "../../../api/excel";
export default {
  data() {
    return {
      total: 0,
      tableData:[],
      tableDatas:[],
      searchObj:{
        tel:'',
        tagName:'',
        tagId:'',
        communityName:'',
        powerId:'',
        typeId:'',
        img:'',
        sex:1,
        address:'',
        companyId:'',
        resId:'',
        idNumber:'',
        placeholder:'',
        residential:'',
        pageNum:1,
        pageSize:20,
      },
      sex:'',
      title:'添加实有力量',
      multipleSelection: [],
      options:[],
      option:[],
      powerImgs:[],
      dialogFormVisible: false,
      formLabelWidth: '120px',
      rules: {
        communityName: [
          {required: true, message: '请输入实有力量名称', trigger: 'blur'}
        ],
        idNumber: [
          {required: true, message: '请输入证件号码', trigger: 'blur'}
        ],
        typeId: [
          { required: true, message: '请选择证件类型', trigger: 'change' }
        ],
        resId: [
          { required: true, message: '请选择小区类型', trigger: 'change' }
        ],
      }
    }
  },
  created() {
    // 实有力量列表
    this.getList()
    //标签列表展示
    this.getTagList()
    // 证件类型
    this.getNameList()
    // 小区类型
    this.getResidenceList()
  },
  methods:{
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.searchObj.pageSize=val
      this.getList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.searchObj.pageNum=val
      this.getList()
    },
    //标签列表展示
    getTagList() {
      getTagList(this.searchObj).then(response => {
        this.tableDatas = response.data.list;
      })
    },
    //导出
    derive() {
      getExport(this.ids).then(response => {
        exportExcel("/dev-api/community-warfare/export","实有力量列表.xlsx")
        this.$message.success('导出成功')
      })
    },
    // 添加照片
    handleAvatarSuccess(res, file) {
      this.powerImgs.push(res)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //实有力量列表展示
    getList() {
      getPowerList(this.searchObj).then(response => {
        this.tableData = response.data.list;
        this.total=response.data.total
      })
    },
    // 证件类型
    getNameList() {
      getNameList().then(response => {
        this.options = response.data;
      })
    },
    // 小区类型
    getResidenceList() {
      getResidenceList().then(response => {
        this.option = response.data;
      })
    },
    // 添加标签
    getAdd() {
      let  tagIds=[]
      this.multipleSelection.forEach(searchObj=>{
        tagIds.push(searchObj.tagId)
        this.searchObj.tagId =tagIds
      })
      if (this.searchObj.powerId){
        getUpdPower(this.searchObj).then(response => {
          this.$message.success('修改成功');
          this.getList()
          this.dialogFormVisible = false;
        })
      }else {
        let  tagIds=[]
        this.multipleSelection.forEach(searchObj=>{
          tagIds.push(searchObj.tagId)
          this.searchObj.tagId =tagIds
        })
        this.searchObj.img = this.powerImgs.join(',')
        getAddPower(this.searchObj).then(response => {
          this.$message.success('添加成功');
          this.getList()
          this.dialogFormVisible = false;
          this.tag = {
            tel:'',
            tagName:'',
            tagId:'',
            communityName:'',
            powerId:'',
            typeId:'',
            img:'',
            sex:'',
            address:'',
            companyId:'',
            resId:'',
            idNumber:'',
            placeholder:'',
            residential:'',
          }
        })
      }
    },
    // 删除标签
    delTag() {
      if (this.multipleSelection.length===0){
        this.$message.warning("至少选则一个")
      }
      MessageBox.confirm('是否要删除', 'Confirm logout', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let  tagIds=[]
        this.multipleSelection.forEach(searchObj=>{
          tagIds.push(searchObj.powerId)
        })
        getDelPower(tagIds).then(res=>{
          if (tagIds.length!==0){
            this.$message.success("删除成功")
            this.getList()
          }
        })
      })
    },
    // 回显
    handleClick(powerId) {
      this.title='修改实有力量'
      this.dialogFormVisible = true;
      this.searchObj.sex = '1'
      getByidPower(powerId).then(response => {
        this.searchObj.sex = response.data.sex
        this.searchObj = response.data;
      })
    },
  }
}
</script>

<style scoped lang="scss">

</style>
